.router-login {
  height: 100%;
  width: 100%;
  position: relative;
  background: plv(bg-1);
  display: flex;
  align-items: center;
  justify-content: center;

  .router-login-background {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    //filter: blur(2px);
    transform: scale(1.2);
    transform-origin: center;
  }

  .router-login-header-selector {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 16px;
    @include comp(theme-selector) {
      backdrop-filter: blur(8px);
      position: relative;

      &:before {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: '';
        background-color: plv(bg-2);
        z-index: 1;
        border-radius: 999px;
        opacity: 0.8;
      }
      & > span, & > div {
        position: relative;
        z-index: 2;
      }
    }
  }

  .router-login-content {
    position: relative;
    z-index: 2;
    width: 375px;
    backdrop-filter: blur(8px);
    border-radius: plv(box-size-large-border-radius);
    background-color: plv(bg-2);
    overflow: hidden;

    & > * {
      position: relative;
      z-index: 2;
    }

    .router-login-content-bg {
      position: absolute;
      z-index: 1 !important;
      bottom: 0;
      left: 0;
      width: 100%;
      opacity: 0.1;
      transform: translate3d(-86%, 245%, 0) scale(5);
      transform-origin: bottom left;
      color: plv(primary-6);
    }
  }

  .router-login-title {
    font-family: sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 36px;
    color: plv(text-1);
    padding: 24px 0 16px;

    img {
      height: 120px;
    }

    @include comp(theme-selector) {
      position: absolute;
      right: 8px;
      top: 8px;
      font-size: 16px;
    }
  }

  .router-login-form {
    padding: 0 16px;

    .form-inner {
      width: 100%;
    }

    & > * {
      margin-bottom: 24px;
    }

    .router-login-desc {
      text-align: center;
      color: plv(text-2);
    }

    .router-login-setting {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .router-login-separator {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      &:before, &:after {
        background-color: plv(border-color);
        height: 1px;
        flex: 1;
        content: '';
        transform: scaleY(0.75);
      }

      span {
        position: relative;
        z-index: 2;
        display: block;
        padding: 0 16px;
        font-size: 12px;
      }
    }

    .router-login-other {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      @include comp(button) {
        font-size: 24px;
        margin: 0 16px;

        @include hover(button) {
          color: plv(primary-6);
        }
      }
    }

    @include comp(input) {
      &.input-mode-stroke {
        border-color: plv(border-color);
        @include hover(input) {
          background-color: plv(bg-2);
        }
      }
    }
  }

  /*---------------------------------------transition-------------------------------------------*/

  $duration: 300ms;
  $duration_space: 50ms;

  .router-login-background {
    & > g > g {
      transition: all ease $duration;
    }

    @each $index in (1, 2, 3, 4, 5, 6, 7) {
      & > g > g:nth-child(#{$index}) {
        transition-delay: $index * $duration_space * 2;
      }
    }
  }

  @keyframes bg2_radius_animate {
    0% {
      border-radius: 30% 50% 38% 30% / 30% 30% 18% 50%;
    }

    25% {
      border-radius: 69% 17% 73% 14% / 66% 10% 73% 25%;
    }

    50% {
      border-radius: 30% 17% 28% 14% / 27% 10% 38% 25%;
    }

    75% {
      border-radius: 16% 68% 22% 67% / 9% 65% 21% 57%;
    }

    100% {
      border-radius: 30% 50% 38% 30% / 30% 30% 18% 50%;
    }
  }

  .router-login-background2 {
    width: 200px;
    height: 200px;
    position: fixed;
    left: 15%;
    bottom: 15%;
    z-index: 2;
    animation: linear bg2_radius_animate 30s infinite;
    filter: drop-shadow(2px 5px 60px currentColor);
  }

  .router-login-content,
  .router-login-title img,
  .router-login-title img + span,
  .router-login-form .router-login-desc,
  .#{componentName(form-item)}:first-child,
  .#{componentName(form-item)}:last-child,
  .router-login-form .router-login-setting,
  .router-login-submit-button,
  .router-login-separator,
  .router-login-other,
  .router-login-background2, {
    transition: all ease $duration;
  }

  .router-login-content {
    transition-duration: calc(#{$duration} + #{$duration_space} * (8 - 2));
  }

  /*@formatter:off*/
  .router-login-title img{transition-delay: calc(#{$duration_space} * (1 - 1))}
  .router-login-title img + span{transition-delay: calc(#{$duration_space} * (2 - 1))}
  .router-login-form .router-login-desc {transition-delay: calc(#{$duration_space} * (3 - 1))}
  .#{componentName(form-item)}:first-child {transition-delay: calc(#{$duration_space} * (4 - 1))}
  .#{componentName(form-item)}:last-child {transition-delay: calc(#{$duration_space} * (5 - 1))}
  .router-login-form .router-login-setting {transition-delay: calc(#{$duration_space} * (6 - 1))}
  .router-login-submit-button {transition-delay: calc(#{$duration_space} * (7 - 1))}
  .router-login-separator {transition-delay: calc(#{$duration_space} * (9 - 1))}
  .router-login-other {transition-delay: calc(#{$duration_space} * (10 - 1))}
  /*@formatter:on*/

  &.router-login-not-mounted {

    .router-login-content {
      opacity: 0;
      clip-path: polygon(-0% 0, 100% 0, 100% 0, -0% 0);
    }

    .router-login-title img,
    .router-login-title img + span,
    .router-login-form .router-login-desc,
    .#{componentName(form-item)}:first-child,
    .#{componentName(form-item)}:last-child,
    .router-login-form .router-login-setting,
    .router-login-submit-button,
    .router-login-separator,
    .router-login-other,
    .router-login-background2, {
      transform: translateY(40px);
      opacity: 0;

      &.router-login-background2 {
        transform: translateY(80px) scale(0.5);
      }
    }

    .router-login-background {
      & > g > g {
        opacity: 0;
        transform: translateX(40px);
      }
    }
  }

  &:not(.router-login-not-mounted) {
    .router-login-content {
      opacity: 1;
      clip-path: polygon(-0% 0, 100% 0, 100% 100%, -0% 100%);
    }
  }
}

.app-container {
  @include sizeMixin(app-container, ()) {
    .router-login-desc {
      font-size: $font-size;
      line-height: calc(#{$font-size} * 1.5715);
    }
  }
}
